<template>
    <div
        
        :class="[type === 'formselect' ? 'at-formselect-dropdown' : 'at-select-dropdown',
         { 'is-multiple': $parent.multiple }, popperClass]"
        :style="{ minWidth: minWidth }">
        <slot></slot>
    </div>
</template>

<script type="text/babel">
    import Popper from '../../common/utils/vue-popper';
    export default {
        name: 'AtSelectDropdown',

        componentName: 'AtSelectDropdown',

        mixins: [Popper],

        props: {
            placement: {
                default: 'bottom-start'
            },

            boundariesPadding: {
                default: 0
            },

            popperOptions: {
                default() {
                    return {
                      forceAbsolute: true,
                      gpuAcceleration: false
                    };
                }
            },
            type:{
                type:String,
                default:''
            }
        },

        data() {
            return {
                minWidth: ''
            };
        },

        computed: {
            popperClass() {
                return this.$parent.popperClass;
            }
        },

        watch: {
            '$parent.inputWidth'() {
                this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
            }
        },

        mounted() {
            this.referenceElm = this.$parent.$refs.reference.$el;
            this.$parent.popperElm = this.popperElm = this.$el;
            this.$on('updatePopper', () => {
              if (this.$parent.visible) this.updatePopper();
            });
            this.$on('destroyPopper', this.destroyPopper);
        }
    };
</script>
